<template>
	<view>
		<view class="status_bar" :style="{height:barHeight+'px'}">
			<!-- 这里是状态栏 -->
			<view class="top_view"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "barHeight",
		data() {
			return {
				//状态栏
				barHeight: 20,
			};
		},
		mounted() {
			//获取系统状态栏高度
			this.getBarHeight();
		},
		// 组件中不执行
		onLoad: function() {
		},
		methods: {
			//获取系统状态栏高度
			getBarHeight: function() {
				var that = this
				// var height = plus.navigator.getStatusbarHeight();
				// this.barHeight = height;
				// #ifdef H5
				this.barHeight = 0;
				// #endif

				// #ifdef MP-WEIXIN
				wx.getSystemInfo({
					success: function(res) {
						that.barHeight = res.statusBarHeight;
					},
				});
				// #endif
			}
		}
	}
</script>

<style lang="scss">
	//状态栏颜色
	.status_bar {
		width: 100%;
		background-color: rgb(244, 183, 85);
	}

	//状态栏颜色
	.top_view {
		width: 100%;
		color: #FFFFFF;
	}
</style>
